<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <h1 style="text-align:right;">
                    <el-dropdown @visible-change="visibleChange" trigger="click">
                        <span class="el-dropdown-link">
                            我的
                            <el-icon class="el-icon--right">
                                <arrow-up v-if="dropDownRowUp" />
                                <arrow-down v-else />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="showUserInfo">个人中心</el-dropdown-item>
                                <el-dropdown-item @click="showModifyPassword">修改密码</el-dropdown-item>
                                <el-dropdown-item @click="logout">登出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </h1>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-row class="tac">
                        <el-col :span="12">
                            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                                default-active="1" text-color="#fff" @open="handleOpen" @close="handleClose" unique-opened
                                :collapse="isCollapse">
                                <el-sub-menu index="1">
                                    <template #title>
                                        <el-icon>
                                            <User />
                                        </el-icon>
                                        <span>用户管理</span>
                                    </template>
                                    <el-menu-item index="1-1"><el-icon>
                                            <UserFilled />
                                        </el-icon><span>用户管理</span></el-menu-item>
                                    <el-menu-item index="1-2"><el-icon>
                                            <Connection />
                                        </el-icon><span>角色管理</span></el-menu-item>
                                    <el-menu-item index="1-3"><el-icon>
                                            <Menu></Menu>
                                        </el-icon><span>菜单管理</span></el-menu-item>
                                    <el-menu-item index="1-4"><el-icon>
                                            <Lock />
                                        </el-icon><span>权限管理</span></el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="2">
                                    <template #title>
                                        <el-icon>
                                            <Setting />
                                        </el-icon>
                                        <span>系统管理</span>
                                    </template>
                                    <el-menu-item index="2-1"><el-icon>
                                            <document />
                                        </el-icon><span>日志管理</span></el-menu-item>
                                    <el-menu-item index="2-2"><el-icon>
                                            <HelpFilled />
                                        </el-icon><span>代码生成</span></el-menu-item>
                                </el-sub-menu>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-container>
                    <el-main>
                        <router-view />
                    </el-main>
                    <el-footer>
                        <p class="footer">&copy; Ian.</p>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>

        <!--个人中心-->
        <el-dialog v-model="dialogVisible" title="我的信息" width="30%" draggable>
            <p>
                <span v-if="user.lastLoginTime">欢迎回来：</span>
                <span v-else>欢迎登录：</span>
                <b>{{ user.username }}</b> !
            </p>
            <p>上次登录：{{ user.lastLoginTime }} </p>
        </el-dialog>
    </div>
</template>
<script>
import { onMounted, ref } from 'vue'
import { doLogout, doGetUser } from '@/request/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router'
export default {
    name: 'index',
    setup() {
        const name = ref("首页")
        const isCollapse = ref(false)
        const dropDownRowUp = ref(false)
        const dialogVisible = ref(false)
        const user = ref({})

        function visibleChange(isShow) {
            dropDownRowUp.value = isShow
        }
        const handleOpen = (index) => {
        }
        const handleClose = (index) => {
        }
        const showUserInfo = () => {
            doGetUser().then(rsp => {
                user.value = rsp.data.data
                dialogVisible.value = true
            }).catch(err => { })
        }

        const showModifyPassword = () => {

        }

        const logout = () => {
            ElMessageBox.confirm(
                '是否退出登录?',
                '温馨提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '再想想',
                    type: 'warning',
                }
            ).then(() => doLogout()).catch(() => { })
        }

        return {
            isCollapse, dropDownRowUp, dialogVisible, user,
            visibleChange, handleOpen, handleClose, logout, showUserInfo, showModifyPassword
        }
    }
}
</script>
<style scoped>
.header {
    background: #545c64;
    
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 500px;
}

.el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-white);
    display: flex;
    align-items: center;
    border: none;
}

.footer {
    text-align: center;
    line-height: 5vh;
    min-height: 5vh;
    background: rgba(0, 0, 0, 0.01);
}</style>